import QtQuick
import QtQuick.Controls

Rectangle{
	id:popUpPage
	width:200
	height:400

TextField{
		id:tfield
		anchors.top:parent.top
		anchors.topMargin:20
		anchors.left:parent.left
		anchors.right:parent.right
		anchors.leftMargin:20
		anchors.rightMargin:20
		height:25
		color:"red"
		focus:true
		background:Rectangle{
			id:bk
			anchors.fill:parent
			border.width:2
			border.color:"lightblue"
			radius:width/2
			color:"yellow"
		}
		placeholderText:"搜索框"
		MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                bk.color="#effedd"
            }
            onExited:{
                bk.color="yellow"
            }
            onClicked: {
                //selectedRow = row
				popup.open()
            }
        }
	}

	Popup{
		id:popup
		width:tfield.width
		height:parent.height
		//anchors.top:tfield.bottom
		//anchors.topMargin:
		x:20
		y:tfield.height+20
		focus:true
		background:Rectangle{
			anchors.fill:parent
			radius:10
			border.width:3
			border.color:"black"
		}
		
//Property string name:""
		Column{
			anchors.fill:parent
			spacing:5
			
			Repeater{
				model:["中国","日本","越南","台湾"]	
				delegate:Rectangle{
					id:rect
					width:popup.width
					height:20
				   /* 用属性保存颜色，默认透明 */
					//property color normalColor: "yellow"
					//property color hoverColor:  "fdfffe"
					//property color currentColor: normalColor
					border.width:2
					border.color:"#fdfffe"
					radius:width/2
					Text{
						anchors.centerIn:parent
						text:modelData
					}
					MouseArea{
						anchors.fill: parent
						hoverEnabled: true
						onEntered: rect.border.color = "#fccffe"
                        onExited:  rect.border.color = "#fdfffe"
						onClicked: {
							//selectedRow = row
							//popup.open()
						}
					}
				}
			}
		}
		}

}

